<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>svg测试</title>

    <style>
        body{
            background: pink;
        }
    </style>

</head>

<body>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <!-- 定义遮罩 -->
        <defs>
          <mask id="circleMask">
            <!-- 整个区域为白色（完全显示） -->
            <rect width="100%" height="100%" fill="white" />
            <!-- 中心圆形为黑色（完全透明） -->
            <circle cx="100" cy="100" r="50" fill="black" />
          </mask>
        </defs>
      
        <!-- 绘制红色正方形，并应用遮罩 -->
        <rect width="200" height="200" fill="red" mask="url(#circleMask)" />
      </svg>

</body>

</html>